<!DOCTYPE html>
<html>
  <head>
    <title>欢迎使用</title>
	
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
   <style>
        #canvas,#video {
          float: left;  
          margin-right: 10px;  
          background: #fff;  
        }      
        .box {  
          overflow: hidden;  
          margin-bottom: 10px;  
        }
      </style>

  </head>
  
  <body>
	<video width="200" height="150"></video>
	    <canvas width="200" height="150"></canvas>
	
	    <p>
	        <button id="snap">截取图像</button>
	        <button id="close">关闭摄像头</button>
	        <button id="upload">上传图像</button>
	    </p>
	
	    <img id="uploaded" width="200" height="150" />
	      <script type="text/javascript">
	      function $(elem) {
	          return document.querySelector(elem);
	      }
	  
	      // 获取媒体方法（旧方法）
	      navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMeddia || navigator.msGetUserMedia;
	  
	      var canvas = $('canvas'),
	          context = canvas.getContext('2d'),
	          video = $('video'),
	          snap = $('#snap'),
	          close = $('#close'),
	          upload = $('#upload'),
	          uploaded = $('#uploaded'),
	          mediaStreamTrack;
	  
	      // 获取媒体方法（新方法）
	      // 使用新方法打开摄像头
	      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
	          navigator.mediaDevices.getUserMedia({
	              video: true,
	              audio: true
	          }).then(function(stream) {
	              console.log(stream);
	  
	              mediaStreamTrack = typeof stream.stop === 'function' ? stream : stream.getTracks()[1];
	  
	              video.src = (window.URL || window.webkitURL).createObjectURL(stream);
	              video.play();
	          }).catch(function(err) {
	              console.log(err);
	          })
	      }
	      // 使用旧方法打开摄像头
	      else if (navigator.getMedia) {
	          navigator.getMedia({
	              video: true
	          }, function(stream) {
	              mediaStreamTrack = stream.getTracks()[0];
	  
	              video.src = (window.URL || window.webkitURL).createObjectURL(stream);
	              video.play();
	          }, function(err) {
	              console.log(err);
	          });
	      }
	  
	      // 截取图像
	      snap.addEventListener('click', function() {
	          context.drawImage(video, 0, 0, 200, 150);
	      }, false);
	  
	      // 关闭摄像头
	      close.addEventListener('click', function() {
	          mediaStreamTrack && mediaStreamTrack.stop();
			  video.src = ''
	      }, false);
	  
	      // 上传截取的图像
	      upload.addEventListener('click', function() {
	          jQuery.post('/uploadSnap.php', {
	              snapData: canvas.toDataURL('image/png')
	          }).done(function(rs) {
	              rs = JSON.parse(rs);
	  
	              console.log(rs);
	  
	              uploaded.src = rs.path;
	          }).fail(function(err) {
	              console.log(err);
	          });
	      }, false);
	  
	      </script>
	   
	   
	   
	   
	   
	   
	   
	   
    <fieldset class="layui-elem-field site-demo-button" style="margin-top: 30px;">
        <legend>登录5</legend>
        <div>
          <button type="button" onclick="adminLogin()" class="layui-btn layui-btn-normal">管理员登录</button>
          <button type="button" onclick="devLogin()" class="layui-btn layui-btn-normal">开发者登录</button>
        </div>
      </fieldset>

      <script src="../layui/layui.js" charset="utf-8"></script>
      <script>
          function adminLogin() {
              location.href = 'adminLogin.html';
          }
          function devLogin() {
            location.href = 'devLogin.html';
          }
      </script>
    </body>
</html>
